<template>
	<scroll-view scroll-y="" class="content">
		<view class="header">
			<image class="head" :src="userInfo.userHeader" mode="aspectFill"></image>
			<view class="name"><text>{{userInfo.userNick}}</text></view>
		</view>
		<view class="list">
			<view class="item" @click="goTo('orderList')">
				<image class="icon" src="../../static/my_icon_reservation@2x.png"></image>
				<text class="name">我的预约</text>
				<text class="more">查看</text>
				<image class="side" src="../../static/guided_icon_more@2x.png"></image>
			</view>
			<!-- <view class="item" @click="goTo('view')"> -->
			<view class="item">
				<image class="icon" src="../../static/my_icon_share@2x.png"></image>
				<text class="name">我的分享</text>
				<text class="more">敬请期待</text>
				<image class="side" src="../../static/guided_icon_more@2x.png"></image>
			</view>
			<!-- <view class="item" @click="goTo('view')"> -->
			<view class="item">
				<image class="icon" src="../../static/my_icon_trace@2x.png"></image>
				<text class="name">我的足迹</text>
				<text class="more">敬请期待</text>
				<image class="side" src="../../static/guided_icon_more@2x.png"></image>
			</view>
			<view class="item">
				<image class="icon" src="../../static/my_icon_member@2x.png"></image>
				<text class="name">会员中心</text>
				<text class="more">敬请期待</text>
				<image class="side" src="../../static/guided_icon_more@2x.png"></image>
			</view>
			<view class="item">
				<image class="icon" src="../../static/my_icon_site@2x.png"></image>
				<text class="name">设置信息</text>
				<text class="more">敬请期待</text>
				<image class="side" src="../../static/guided_icon_more@2x.png"></image>
			</view>

			<view class="item" style="justify-content: flex-start;" @click="loginOut">
				<image class="icon" src="../../static/my_icon_quit@2x.png" style="margin-right: 15rpx;"></image>
				<text class="name">退出登陆</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: undefined
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			goTo(e) {
				if (e == 'orderList') {
					uni.navigateTo({
						url: './myOrderList'
					})
				} else if (e == 'share') {
					uni.navigateTo({
						url: './myShareList'
					})
				} else if (e == 'view') {
					uni.navigateTo({
						url: './myViewList'
					})
				}
			},
			loginOut() {
				uni.showModal({
					title: '退出登录',
					content: '您确定要退出登录吗？',
					cancelColor: '#B9AC90',
					confirmColor: '#AE6059',
					success: function(res) {
						if (res.confirm) {
							uni.setStorageSync('userInfo', '')
							uni.navigateBack()
						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		background: #eee;
		position: fixed;
		width: 100%;
		height: calc(100% - 88rpx);
	}

	.header {
		background: #B9AC90;
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header .head {
		border-radius: 90rpx;
		height: 180rpx;
		width: 180rpx;
		border: 4rpx solid #fff;
	}

	.header .name {
		color: #fff;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.list {
		width: calc(100% - 40rpx);
		padding: 20rpx;
	}

	.list .item {
		margin-top: 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background: #fff;
		width: calc(100% - 40rpx);
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list .item .icon {
		height: 60rpx;
		width: 60rpx;
	}

	.list .item .name {
		display: inline-block;
		width: 420rpx;
		line-height: 80rpx;
		color: #333;
		font-size: 30rpx;
	}

	.list .item .more {
		text-align: right;
		width: 120rpx;
		color: #999;
		font-size: 26rpx;
	}

	.list .item .side {
		height: 30rpx;
		width: 30rpx;
	}
</style>
